<template>
  <div class="userInfo-card-box">
    <div class="user-info-img-box flex-col-center">
      <el-avatar :size="100" class="image" shape="square"
                 src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-avatar>
    </div>
    <div style="font-size: 20px;font-weight: 600">{{ user.userNick }}</div>
    <div></div>
  </div>
</template>

<script>
import YImage from "@/components/image/YImage.vue";

export default {
  name: "UserInfoCard",
  components: {YImage},
  data() {
    return {
      user: {
        userNick: "杨K",
      }
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.userInfo-card-box {
  background-color: #A3D0C3;
  border-radius: 3px;
  padding-bottom: 30px;

  .user-info-img-box {
    width: 100%;
    padding: 20px 0;

    .image {
      width: 60%;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
      border: 2px solid black;
      padding: 2px;
      background-color: white;
    }
  }
}
</style>